<template>
  <div class="CompanyInfo">
    <el-row style="background:#EBF0EF;padding:2em;">
      <el-col :span="15" :offset="3">
        <div class="company-title">
          <div class="company-logo">
            <!-- <ShowImageCard :url="url" :config="config"></ShowImageCard> -->
            <img src="../../assets/img/company/logo.jpg">
          </div>
          <div class="company-info">
            <h2>{{companyInfo.company_name}}</h2>
            <p>{{companyInfo.company_publicity}}</p>
            <div class="address">
              <i class="fa fa-map-marker iconstyle"></i>{{companyInfo.company_address}}
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="info-footer">
          <div class="footer-item">
            <span>{{jobNum}}</span>
            <p>在招岗位</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18" :offset="3">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="公司详情" name="first">
            <div class="item_container">
              <div class="item_ltitle">基本信息</div>
              <div class="basical-info">
                <p><i class="fa fa-building iconstyle"></i>{{companyInfo.company_type}}</p>
                <p><i class="fa fa-th-large iconstyle"></i>{{companyInfo.industry_name}}</p>
                <p><i class="fa fa-user-o iconstyle"></i>{{companyInfo.company_size}}</p>
                <p><i class="fa fa-university iconstyle"></i>{{companyInfo.company_website}}</p>
              </div>
            </div>
            <div class="item_container" id="company_intro">
              <div class="item_ltitle">公司介绍</div>
              <div class="item_content">
                <div class="company_intro_text" style="display: block;">
                  <span class="company_content">
                    {{companyInfo.company_profile}}
                  </span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="在聘岗位" name="second" style="min-height:10em;">
            <div v-if="jobNum===0">暂无更多数据</div>
            <div v-else class="position-card" v-for="(item,index) in PositionList" :key="index">
              <div class="content-left">
                <h3 @click="jobDetail(item.id)">{{item.job_title}}</h3>
                <p><span>{{item.salary}}</span> {{item.academic_requirements}} / {{item.work_experience}}</p>
              </div>
              <div class="content-right">
                <p>{{item.release_date}}发布</p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import { changeSalaryStyle } from '../../assets/js/common.js'
  import Data from '../../assets/file/searchJob.json'
  import ShowImageCard from '@/components/common/ShowImageCard'

  export default {
    name: 'CompanyInfo',
    data () {
      return {
        config: {
          width: '152px',
          height: '160px'
        },
        url: undefined,
        companyId: '',
        activeName: 'first',
        jobNum: 0,
        companyInfo: {},
        PositionList: []
      }
    },
    created () {
      this.companyId = this.$route.params.id
      this.getCompanyInfor()
      this.getPositionList(1)
    },
    methods: {
      getCompanyInfor () {
        let _this = this
        let params = new Object()
        params.company_id = _this.companyId
        postDataToServer('COMPANY_GET', params).then((data) => {
          if (data.status === 0) {
            _this.companyInfo = data.data_list
            _this.companyInfo.company_size = getStaticMapList('company_size', _this.companyInfo.company_size)
            _this.companyInfo.company_type = getStaticMapList('company_type', _this.companyInfo.company_type)
          }
        })
      },
      getPositionList (pageNum) {
        let _this = this
        let params = new Object()
        params.company_id = _this.companyId
        params.page_no = pageNum
        params.page_size = 100
        postDataToServer('HM_COMPANY_JOB_LISTPAGE', params).then(function (data) {
          if (data.status === 0) {
            _this.jobNum = data.total_results
            data.data_list.forEach((item) => {
              _this.changeJobType(item)
              item = changeSalaryStyle(item)
            })
            _this.PositionList = data.data_list
          }
        })
      },
      changeJobType (obj) {
        obj.academic_requirements = getStaticMapList('academic_requirements', obj.academic_requirements)
        obj.work_experience = getStaticMapList('work_experience', obj.work_experience)
      },
      handleClick (tab, event) {

      },
      jobDetail (id) {
        this.$router.push({path: '/positioninfo/' + id})
      }
    },
    components: {
      ShowImageCard
    }
  }
</script>

<style scoped>
  /*公司卡片样式*/
  .company-title {
    height: 10em;
    background: #FFF;
  }

  .company-logo {
    width: 15%;
    height: 160px;
    float: left;
    text-align: center;
  }

  .company-logo img {
    width: 150px;
    height: 150px;
  }

  .company-info {
    width: 81%;
    float: right;
  }

  .company-info .address {
    background: #FAFAFA;
    color: #999;
    height: 2em;
    line-height: 2em;
    padding-left: 2em;
  }

  .company-info h2 {
    padding: 0.9em 1em 0.2em;
    font-weight: 500;
  }

  .company-info p {
    min-height: 3em;
    padding: 0.5em 2em 0.9em;
  }

  .info-footer {
    background: #fff;
    height: 10em;
    text-align: center;
    border-left: 1px solid #DADADA;
  }

  .footer-item span {
    font-size: 6em;
    color: #20A0FF;
  }

  .footer-item p {
    background: #FAFAFA;
    line-height: 2em;
    color: #999;
  }

  /*tabs样式*/
  .item_container {
    position: relative;
    width: 80%;
    min-height: 20px;
    padding: 30px 0px;
    margin: 30px 30px;
    border-top: 1px solid #e8e8e8;
  }

  .item_container .item_ltitle {
    position: absolute;
    top: -15px;
    left: 0;
    height: 28px;
    padding-right: 16px;
    font-size: 18px;
    line-height: 28px;
    color: #000;
    background-color: #fff;
  }

  #company_intro .company_intro_text {
    text-indent: 20px;
    min-height: 20px;
    margin-bottom: 30px;
    overflow-y: hidden;
    color: #555;
  }

  /*公司基本情况*/
  .basical-info p {
    margin: 1em;
    color: #ccc;
  }

  .iconstyle {
    color: #666666;
    margin-right: 30px;
  }

  /*公司职位卡片样式*/
  .position-card {
    width: 90%;
    height: 5em;
    margin: 1em auto;
    border: 1px solid #ccc;
    border-left: 5px solid #20A0FF;
  }

  .content-left {
    width: 40%;
    float: left;
    margin-left: 1em;
  }

  .content-left h3 {
    color: #20A0FF;
    margin: 10px auto;
    cursor: pointer;
  }

  .content-left p {
    font-size: 16px;
  }

  .content-left p span {
    color: red;
    margin-right: 1em;
  }

  .content-right {
    width: 40%;
    float: right;
  }

  .content-right p {
    font-size: 16px;
    color: #999999;
    line-height: 3em;
    margin-left: 1em;
    font-weight: 300;
  }
</style>
